<link rel="stylesheet" type="text/css" href="<?php echo css_url().'general_form.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'table/list_show.css'?>">
<form id="edit-user-contact-form" action="<?php echo site_url().'/user_group3/account/edit_user_contact'?>" method="post">
    <ol>
    
    <!--Address Field-->
    <div class="head">Address: 
            <div id="edit-address" class="margin-left add-btn" style='position:relative; left:8%'>Edit</div>
    </div>
    <div class="tab">
    <?php
        $Adds = $UserInfo['Address'];
        $Adds = explode("#", $Adds);
        for($i = 0; $i < count($Adds); $i++){
            switch ($i){
                case 0:?>
                    <li>   
                        <input class="text" type="text" placeholder="Province" name="Address[]" readonly="readonly" field="address" value="<?php echo $Adds[$i] ?>">                           
                    <?php
                    break;
                case 1:?>
                        <input class="text" type="text" placeholder="City" name="Address[]" readonly="readonly" field="address" value="<?php echo $Adds[$i] ?>">
                    </li> 
                    <?php
                    break;
                case 2: ?>
                    <li>
                        <input  class="text" type="text" placeholder="Disrtict" name="Address[]" readonly="readonly" field="address" value="<?php echo $Adds[$i] ?>">  
                    <?php
                    break;
                case 3:?>
                        <input class="text" type="text" placeholder="Address" name="Address[]" readonly="readonly" field="address" value="<?php echo $Adds[$i] ?>">
                    </li>
                    <?php
                    break;
            }
        }
    ?>
    </div>
        <div class="head">Phone: 
                <div id="add-phone" class="margin-left add-btn" style='position:relative; left: 11%'>+</div>
                <div id="delete-phone" class="margin-left add-btn" style='position:relative; left:16%'>-</div>
        </div>

        <div class="tab">
            <li id="phone-section">
            <?php
                $Phones = $UserInfo['Phone'];
                $Phones = explode("#",$Phones);
                foreach($Phones as $Phone){
                    ?>
                    <input class="text margin-bottom" type="text" placeholder="Phone" name="Phones[]" field="address" value="<?php echo $Phone ?>">

                <?php } 
            ?>
            </li>
        </div>
        
        <div class="head">Profile Links: 
                <div id="add-profile-links" class="margin-left add-btn" style='position:relative; left:5%'>+</div>
                <div id="delete-profile-links" class="margin-left add-btn" style='position:relative; left:10%'>-</div>
        </div>

        <div class="tab">
            <li id="profile-link-section">
            <?php
                $ProfileLinks = $UserInfo['ProfileLinks'];
                $ProfileLinks = explode("#",$ProfileLinks);
                foreach($ProfileLinks as $ProfileLink){
                    ?>
                    <input class="text margin-bottom" type="text" placeholder="Profile Link" name="ProfileLinks[]" field="address" value="<?php echo $ProfileLink ?>">

                <?php } 
            ?>
            </li>
        </div>
        
        <div class="tab">
            <div id="edit-user-form-submit" class="submit-bt" >Save</div>
        </div>
    </ol>
    
</form>

<script>
    $("#edit-address").on('click',function(){
        $("input[field='address']").attr('readonly',false);
    });
    
    /*------- Add Phones -------*/
    $("#add-phone").on("click",function(){
        data = '<input class="text margin-bottom" type="text" placeholder="Phone" name="Phones[]">';
        $("#phone-section").append(data);
    });
    
    $("#delete-phone").on("click",function(){
        $("#phone-section input:last-child").remove();
    });
    /*------ End of add phones ------*/
    
    /*------- Add Profile Links -------*/
    $("#add-profile-links").on("click",function(){
        data = '<input class="text margin-bottom" type="text" placeholder="Profile Link" name="ProfileLinks[]">';  
        $("#profile-link-section").append(data);
    });
    
    $("#delete-profile-links").on("click",function(){
        $("#profile-link-section input:last-child").remove();
    });
    
    $("#edit-user-form-submit").on("click", function(){
        $("#edit-user-contact-form").submit();
    });
    /*------ End of add profile links ------*/
</script>
